<template>
	<view class="container">
		<view style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);margin: 20rpx auto;width: 90%;padding-bottom: 20rpx;">
			<!-- 进度条 -->
			<view class="status-bar">
				<view class="status-item" v-for="(item, index) in statusList" :key="index"
					:class="{ 'active': index <= currentStatus, 'current': index === currentStatus }">
					<view class="status-dot"></view>
					<view class="status-text">{{ item.text }}</view>
					<view class="status-line" v-if="index < statusList.length - 1"></view>
				</view>
			</view>

			<!-- 礼物信息 -->
			<view class="gift-info">
				<view class="gift-sender">
					<text class="sender-name">白醒</text>
					<text class="gift-time">2025-05-16 10:28:00 赠送</text>
				</view>
			</view>

			<!-- 商品卡片 -->
			<view class="product-card">
				<view class="product-image">
					<image src="/static/product-gift.png" mode="aspectFill"></image>
					<view class="brand-logo">
						<text class="brand-name">ANGZHAI</text>
						<text class="brand-sub">风山</text>
					</view>
					<view class="product-tag">VC黄金百香果美容礼盒</view>
				</view>
				<view class="product-details">
					<view class="product-title" @click="viewProductDetail">2025头茶果已经上线一纯甜无酸黄金百香果VC之王粉色轻奢礼盒</view>
					<view class="product-quantity">x1</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="btn btn-outline" @click="modifyAddress">修改收货地址</button>
				<button class="btn btn-primary" @click="shareGift">我也要送</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStatus: 1, // 当前状态索引，1表示"待好友支付"
				statusList: [{
						text: '已领取'
					},
					{
						text: '待好友支付'
					},
					{
						text: '待发货'
					},
					{
						text: '已发货'
					},
					{
						text: '已完成'
					}
				],
				currentTab: 'product', // product | subscription
				giftStatus: 'waitingPayment', // received | waitingPayment | shipping | shipped | completed
				giftInfo: {
					sender: '白醒',
					sendTime: '2025-05-16 10:28:00',
					productTitle: '2025头茶果已经上线一纯甜无酸黄金百香果VC之王粉色轻奢礼盒',
					quantity: 1
				}
			}
		},
		methods: {
			// 导航相关
			goBack() {
				console.log('返回上一页');
				uni.navigateBack();
			},
			showMoreOptions() {
				console.log('显示更多选项');
				uni.showActionSheet({
					itemList: ['分享给朋友', '举报', '删除记录'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个选项');
						switch (res.tapIndex) {
							case 0:
								this.shareToFriend();
								break;
							case 1:
								this.reportGift();
								break;
							case 2:
								this.deleteRecord();
								break;
						}
					}
				});
			},
			showRecord() {
				console.log('显示记录');
				// 跳转到记录页面
				uni.navigateTo({
					url: '/pages/gift-record/gift-record'
				});
			},

			// 标签切换
			switchToProduct() {
				console.log('切换到产品标签');
				this.currentTab = 'product';
				// 重新加载产品数据
				this.loadProductGifts();
			},
			switchToSubscription() {
				console.log('切换到订阅卡标签');
				this.currentTab = 'subscription';
				// 重新加载订阅卡数据
				this.loadSubscriptionGifts();
			},

			// 商品相关
			viewProductDetail() {
				console.log('查看商品详情');
				uni.navigateTo({
					url: '/pages/product-detail/product-detail?id=123'
				});
			},

			// 操作按钮
			modifyAddress() {
				console.log('修改收货地址');
				uni.navigateTo({
					url: '/pagesA/editAddress/editAddress?from=gift'
				});
			},
			shareGift() {
				console.log('我也要送');
				// 跳转到商品页面或者礼品购买页面
				uni.switchTab({
					url: '/pages/giftList/giftList'
				});
			},

			// 更多操作相关
			shareToFriend() {
				console.log('分享给朋友');
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: 'https://example.com/gift/123',
					title: '我收到了一份礼物',
					summary: this.giftInfo.productTitle,
					success: (res) => {
						console.log('分享成功');
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log('分享失败:', err);
					}
				});
			},
			reportGift() {
				console.log('举报礼物');
				uni.showModal({
					title: '举报',
					content: '确定要举报这份礼物吗？',
					success: (res) => {
						if (res.confirm) {
							// 提交举报
							uni.showToast({
								title: '举报已提交',
								icon: 'success'
							});
						}
					}
				});
			},
			deleteRecord() {
				console.log('删除记录');
				uni.showModal({
					title: '删除确认',
					content: '删除后将无法恢复，确定要删除这个礼物记录吗？',
					success: (res) => {
						if (res.confirm) {
							// 删除记录逻辑
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				});
			},

			// 数据加载
			loadProductGifts() {
				console.log('加载产品礼物数据');
				// 加载产品类型的礼物数据
			},
			loadSubscriptionGifts() {
				console.log('加载订阅卡礼物数据');
				// 加载订阅卡类型的礼物数据
			}
		},
		mounted() {
			// 页面加载时初始化数据
			this.loadProductGifts();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	// 状态流程条样式
	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.status-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #d1d5db;
		margin-bottom: 16rpx;
		position: relative;
		z-index: 2;
	}

	.status-item.active .status-dot {
		background-color: #8b5cf6;
	}

	.status-item.current .status-dot {
		background-color: #8b5cf6;
		box-shadow: 0 0 0 6rpx rgba(139, 92, 246, 0.2);
	}

	.status-text {
		font-size: 24rpx;
		color: #6b7280;
		text-align: center;
	}

	.status-item.active .status-text {
		color: #374151;
		font-weight: 500;
	}

	.status-line {
		position: absolute;
		top: 12rpx;
		left: 60%;
		right: -40%;
		height: 2rpx;
		background-color: #d1d5db;
		z-index: 1;
	}

	.status-item.active .status-line {
		background-color: #8b5cf6;
	}

	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;

		.nav-left {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.back-icon {
				font-size: 48rpx;
				color: #333;
				font-weight: 300;
			}
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}

		.nav-right {
			display: flex;
			align-items: center;
			gap: 24rpx;

			.dots {
				font-size: 36rpx;
				color: #333;
			}

			.record-btn {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				border: 4rpx solid #333;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 4rpx solid #333;
				}
			}
		}
	}

	.switch-bar {
		display: flex;
		background-color: #fff;
		margin: 20rpx 32rpx 0;
		border-radius: 12rpx;
		overflow: hidden;

		.switch-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;

			&.active {
				color: #00bcd4;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 6rpx;
					background-color: #00bcd4;
				}
			}
		}
	}

	.progress-section {
		margin: 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx;
	}

	.progress-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			position: relative;

			.step-dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #e0e0e0;
				margin-bottom: 12rpx;

				&.active {
					background-color: #ff6b35;
				}
			}

			.step-text {
				font-size: 20rpx;
				color: #999;
				white-space: nowrap;

				&.active {
					color: #ff6b35;
					font-weight: 600;
				}
			}
		}

		.progress-line {
			position: absolute;
			top: 10rpx;
			height: 2rpx;
			background-color: #e0e0e0;
			width: calc(20% - 20rpx);

			&:nth-of-type(2) {
				left: calc(20% + 10rpx);
			}

			&:nth-of-type(4) {
				left: calc(40% + 10rpx);
			}

			&:nth-of-type(6) {
				left: calc(60% + 10rpx);
			}

			&:nth-of-type(8) {
				left: calc(80% + 10rpx);
			}

			&.active {
				background-color: #ff6b35;
			}
		}
	}

	.gift-info {
		margin: 0 32rpx 24rpx;

		.gift-sender {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sender-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}

			.gift-time {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.product-card {
		margin: 0 32rpx 40rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;


		.product-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 32rpx;
			position: relative;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
			}

			.brand-logo {
				position: absolute;
				top: 16rpx;
				left: 16rpx;
				color: #fff;

				.brand-name {
					font-size: 24rpx;
					font-weight: bold;
					display: block;
				}

				.brand-sub {
					font-size: 20rpx;
					opacity: 0.8;
				}
			}

			.product-tag {
				position: absolute;
				bottom: 16rpx;
				left: 16rpx;
				color: #fff;
				font-size: 20rpx;
				background: rgba(0, 0, 0, 0.3);
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
			}
		}

		.product-details {
			flex: 1;
			display: flex;
			flex-direction: column;

			.product-title {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 16rpx;
			}

			.product-quantity {
				align-self: flex-end;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.action-buttons {
		display: flex;
		gap: 24rpx;
		margin: 0 32rpx;

		.btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&.btn-outline {
				background-color: #fff;
				color: #666;
				border: 2rpx solid #e0e0e0;
			}

			&.btn-primary {
				background-color: #00bcd4;
				color: #fff;
				border: none;
			}
		}
	}
</style>